<template>
	<app-layout>
		<!-- 8.31 注释 -->
		<!-- <view class="tab-list">
			<view class="tab cross-center main-center">
				<view @click="toList">浏览记录</view>
				<view class="active">账单总结</view>
			</view>
		</view> -->
		<!-- 8.31 修改 外层view加 background-size: 100%;内层view加 padding-top: 0;-->
		<view @touchstart="start(1)" @touchmove="enter" @touchend="leave"
			:class="[`list`,`${active == 1 ? 'active' : ''}`, `${last == 1 ? 'last' : ''}`]"
			:style="{'background-image': `url(${ttf.open_bg})`}" style="background-size: 100%;">
			<view style="height: 100%;padding-top: 0;" class="show-icon first cross-center main-center">
				<image :style="{'width': `${size[1].width}`,'height':`${size[1].height}`}" @load="load(1,$event)"
					:src="ttf.index"></image>
			</view>
		</view>
		<view @touchstart="start(2)" @touchmove="enter" @touchend="leave"
			:class="[`list`,`${active == 2 ? 'active' : ''}`, `${next == 2 ? 'next' : ''}`, `${last == 2 ? 'last' : ''}`]"
			:style="{'background-image': `url(${ttf.day_bg})`}">
			<view class="info cross-center dir-top-nowrap main-center">
				<view>这是您在<text class="name">{{mall.name}}</text></view>
				<view>的第<text class="day">{{day}}</text>天</view>
			</view>
			<view class="show-icon cross-center main-center">
				<image :style="{'width': `${size[2].width}`,'height':`${size[2].height}`}" @load="load(2,$event)"
					:src="ttf.day_icon"></image>
			</view>
		</view>
		<view @touchstart="start(3)" @touchmove="enter" @touchend="leave"
			:class="[`list`,`${active == 3 ? 'active' : ''}`, `${next == 3 ? 'next' : ''}`, `${last == 3 ? 'last' : ''}`]"
			:style="{'background-image': `url(${ttf.total_bg})`}">
			<view class="info cross-center dir-top-nowrap main-center">
				<view>截止到<text class="yesterday">{{yesterday}}</text></view>
				<view>您在本店共消费<text style="color: #fff7be">￥</text><text class="pay-price">{{pay_price}}</text></view>
			</view>
			<view class="show-icon cross-center main-center">
				<image :style="{'width': `${size[3].width}`,'height':`${size[3].height}`}" @load="load(3,$event)"
					:src="ttf.total"></image>
			</view>
		</view>
		<view @touchstart="start(4)" @touchmove="enter" @touchend="leave"
			:class="[`list`,`${active == 4 ? 'active' : ''}`, `${next == 4 ? 'next' : ''}`, `${last == 4 ? 'last' : ''}`]"
			:style="{'background-image': `url(${ttf.buy_bg})`}">
			<view class="info cross-center dir-top-nowrap main-center">
				<view>截止到<text class="yesterday">{{yesterday}}</text></view>
				<view>您在本店共购买<text class="pay-price">{{pay_num}}</text>件商品</view>
			</view>
			<view class="show-icon cross-center main-center">
				<image :style="{'width': `${size[4].width}`,'height':`${size[4].height}`}" @load="load(4,$event)"
					:src="ttf.buy"></image>
			</view>
		</view>
		<view @touchstart="start(5)" @touchmove="enter" @touchend="leave"
			:class="[`list`,`${active == 5 ? 'active' : ''}`, `${next == 5 ? 'next' : ''}`, `${last == 5 ? 'last' : ''}`]"
			:style="{'background-image': `url(${ttf.high_bg})`}">
			<view style="height: 25%" class="info cross-center dir-top-nowrap main-center">
				<view>截止到<text class="yesterday">{{yesterday}}</text></view>
				<view class="other">您在本店的最高一次消费达到</view>
				<view><text style="color: #fff7be">￥</text><text class="pay-price">{{highest_price}}</text></view>
			</view>
			<view class="show-icon cross-center main-center">
				<image :style="{'width': `${size[5].width}`,'height':`${size[5].height}`}" @load="load(5,$event)"
					:src="ttf.high_icon"></image>
			</view>
		</view>
		<view @touchstart="start(6)" @touchmove="enter" @touchend="leave"
			:class="[`list`,`${active == 6 ? 'active' : ''}`, `${next == 6 ? 'next' : ''}`, `${last == 6 ? 'last' : ''}`]"
			:style="{'background-image': `url(${ttf.coupon_bg})`}">
			<view style="height: 26%" class="info cross-center dir-top-nowrap main-center">
				<view>截止到<text class="yesterday">{{yesterday}}</text></view>
				<view>使用了<text class="yesterday">{{coupon_num}}</text>张优惠券</view>
				<view>共计节省了<text style="color: #fff7be">￥</text><text class="pay-price">{{coupon_discount_price}}</text>
				</view>
			</view>
			<view class="show-icon cross-center main-center">
				<image :style="{'width': `${size[6].width}`,'height':`${size[6].height}`}" @load="load(6,$event)"
					:src="ttf.coupon_icon"></image>
			</view>
		</view>
		<view v-if="userInfo.identity.member_level > 0 || userInfo.is_vip_card_user == 1" @touchstart="start(7)"
			@touchmove="enter" @touchend="leave"
			:class="[`list`,`${active == 7 ? 'active' : ''}`, `${next == 7 ? 'next' : ''}`, `${last == 7 ? 'last' : ''}`]"
			:style="{'background-image': `url(${ttf.member_bg})`}">
			<view style="height: 25%" class="info cross-center dir-top-nowrap main-center">
				<view>截止到<text class="yesterday">{{yesterday}}</text></view>
				<view class="other">您作为会员，比普通用户节省</view>
				<view><text style="color: #fff7be">￥</text><text class="pay-price">{{member_discount_price}}</text>
				</view>
			</view>
			<view class="show-icon cross-center main-center">
				<image :style="{'width': `${size[7].width}`,'height':`${size[7].height}`}" @load="load(7,$event)"
					:src="ttf.member_icon"></image>
			</view>
		</view>
		<view @touchstart="start(8)" @touchmove="enter" @touchend="leave"
			:class="[`list`,`${active == 8 ? 'active' : ''}`, `${next == 8 ? 'next' : ''}`, `${last == 8 ? 'last' : ''}`]"
			:style="{'background-image': `url(${ttf.buy_bg})`}">
			<view class="info cross-center dir-top-nowrap main-center">
				<view class="other">您的消费力度高于本店铺</view>
				<view><text class="pay-price">{{percentage*100}}%</text>的客户</view>
			</view>
			<view class="show-icon cross-center main-center">
				<image :style="{'width': `${size[8].width}`,'height':`${size[8].height}`}" @load="load(8,$event)"
					:src="ttf.rate_icon"></image>
			</view>
		</view>
		<view class="text-info" v-if="active == 2">更多惊喜，接着往下看</view>
		<image class="page-down" v-if="active < 8" src="./../image/pgdn.gif"></image>
		<view class="more-menu cross-center main-center" v-if="active == 8">
			<image @click="toMall" src="./../image/to-index.png"></image>
			<image @click="openPoster" src="./../image/share.png"></image>
		</view>
		<view v-if="show" class="poster-dialog">
			<app-goods-preview-poster @close="close" :url="posterUrl"></app-goods-preview-poster>
		</view>
	</app-layout>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import appGoodsPreviewPoster from '../../../components/page-component/goods/app-goods-preview-poster.vue';
	export default {
		data() {
			return {
				day: 0,
				posterUrl: '',
				coupon_discount_price: 0,
				coupon_num: 0,
				highest_price: 0,
				member_discount_price: 0,
				pay_num: 0,
				pay_price: 0,
				percentage: 0,
				yesterday: '',
				active: 1,
				next: null,
				last: 0,
				height: 0,
				loading: false,
				show: false,
				list: [],
				size: [{
					width: '',
					height: ''
				}, {
					width: '',
					height: ''
				}, {
					width: '',
					height: ''
				}, {
					width: '',
					height: ''
				}, {
					width: '',
					height: ''
				}, {
					width: '',
					height: ''
				}, {
					width: '',
					height: ''
				}, {
					width: '',
					height: ''
				}, {
					width: '',
					height: ''
				}]
			}
		},
		components: {
			appGoodsPreviewPoster,
		},
		computed: {
			...mapState({
				mall: state => state.mallConfig.mall,
				ttf: state => state.mallConfig.__wxapp_img.foot,
				userInfo: state => state.user.info,
			})
		},
		methods: {
			openPoster() {
				this.show = true;
				this.posterUrl = this.$api.poster.footprint;
			},
			toMall() {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
			close() {
				this.show = false;
				this.posterUrl = '';
			},
			start(num) {
				if (this.loading) {
					return false
				}
				this.list = [];
				this.active = num;
			},
			enter(e) {
				if (this.loading) {
					return false
				}
				this.list.push(e);
			},
			leave(e) {
				let that = this;
				if (that.loading) {
					return false
				}
				setTimeout(v => {
					that.loading = true;
					if (that.list.length > 0) {
						if (+that.list[0].changedTouches[0].clientY - +that.list[that.list.length - 1]
							.changedTouches[0].clientY > 30 && that.active < 8) {
							setTimeout(v => {
								if (that.active == 6 && that.userInfo.identity.member_level == 0 && that
									.userInfo.is_vip_card_user == 0) {
									that.next = 8;
								} else {
									that.next = that.active + 1;
								}
								if (that.active == 8 && that.userInfo.identity.member_level == 0 && that
									.userInfo.is_vip_card_user == 0) {
									that.last = 6;
								} else {
									that.last = that.active - 1;
								}
								setTimeout(v => {
									uni.pageScrollTo({
										scrollTop: that.height * 2,
										duration: 1000
									});
								}, 100)
								setTimeout(v => {
									that.next = 0;
									if (that.active == 6 && that.userInfo.identity.member_level ==
										0 && that.userInfo.is_vip_card_user == 0) {
										that.active = 8;
									} else {
										that.active++;
									}
									that.loading = false;
								}, 1000)
							}, 100)
						} else if (+that.list[0].changedTouches[0].clientY - +that.list[that.list.length - 1]
							.changedTouches[0].clientY < -30 && that.active > 1) {
							if (that.active == 6 && that.userInfo.identity.member_level == 0 && that.userInfo
								.is_vip_card_user == 0) {
								that.next = 8;
							} else {
								that.next = that.active + 1;
							}
							if (that.active == 8 && that.userInfo.identity.member_level == 0 && that.userInfo
								.is_vip_card_user == 0) {
								that.last = 6;
							} else {
								that.last = that.active - 1;
							}
							uni.pageScrollTo({
								scrollTop: 0,
								duration: 0
							});
							that.next = 0;
							if (that.active == 8 && that.userInfo.identity.member_level == 0 && that.userInfo
								.is_vip_card_user == 0) {
								that.active = 6;
							} else {
								that.active--;
							}
							that.loading = false;
						} else {
							uni.pageScrollTo({
								scrollTop: 0,
								duration: 200
							});
							that.loading = false;
						}
					}
				}, 200)
			},
			toList() {
				uni.redirectTo({
					url: '/pages/foot/index/index'
				});
			},
			getList() {
				let that = this;
				that.$request({
					url: that.$api.foot.list,
				}).then(response => {
					uni.hideLoading();
					that.$hideLoading();
					if (response.code == 0) {
						that.day = response.data.day;
						that.coupon_discount_price = response.data.coupon_discount_price;
						that.coupon_num = response.data.coupon_num;
						that.highest_price = response.data.highest_price;
						that.member_discount_price = response.data.member_discount_price;
						that.pay_num = response.data.pay_num;
						that.pay_price = response.data.pay_price;
						that.percentage = response.data.percentage;
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(() => {
					uni.hideLoading();
					that.$hideLoading();
					that.$event.on(that.$const.EVENT_USER_LOGIN).then(() => {
						that.getList();
					});
				});
			},
			load(index, e) {
				this.size[index].width = e.detail.width + 'rpx';
				this.size[index].height = e.detail.height + 'rpx';
			}
		},
		onLoad() {
			this.height = uni.getSystemInfoSync().windowHeight;
			this.$showLoading({
				type: 'global',
				text: '加载中...'
			});
			var timestamp = Date.parse(new Date());
			// 昨天
			let yesterTime = (timestamp / 1000 - 24 * 60 * 60) * 1000;
			let yesterDate = new Date(yesterTime)
			let yester_year = yesterDate.getFullYear();
			let yester_month = yesterDate.getMonth() + 1;
			if (yester_month >= 1 && yester_month <= 9) {
				yester_month = "0" + yester_month;
			}
			let yester_now = yesterDate.getDate();
			this.yesterday = yester_year + "." + yester_month + "." + yester_now;
			this.getList();
		}
	}
</script>

<style scoped lang="scss">
	.poster-dialog {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 500;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.tab-list {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 300;
		background-color: #fff;
		padding: #{20rpx} 0;
		width: 100%;

		.tab {
			width: #{600rpx};
			border-radius: 40rpx;
			font-size: #{28rpx};
			color: #ff4544;
			border: #{2rpx} solid #ff4544;
			margin: 0 auto #{20rpx};

			view {
				width: #{300rpx};
				height: #{72rpx};
				text-align: center;
				line-height: #{72rpx};
			}

			.active {
				border-radius: #{36rpx};
				background-color: #ff4544;
				color: #fff;
			}
		}

		.tab-date {
			view {
				padding: 0 #{24rpx};
				height: #{60rpx};
				line-height: #{60rpx};
				margin-left: #{24rpx};
				border-radius: #{40rpx};
				color: #353535;
				font-size: #{26rpx};
				display: inline-block;
			}

			.customize {
				width: #{172rpx};
				padding: 0;
				text-align: center;
			}

			.active {
				background-color: #ff4544;
				color: #fff;
			}
		}
	}

	.list {
		padding-top: #{72rpx};
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;

		.show-icon {
			width: 100%;
			bottom: 0;
			left: 0;
			position: absolute;
			height: 70%;
		}

		.show-icon.first {
			padding-top: #{40rpx};
		}
	}

	.list.active {
		position: fixed;
		top: 0;
		z-index: 100;
		display: block;
	}

	.list.next {
		top: 100%;
		display: block;
		z-index: 200;
	}

	// .list.last {
	//     top: 0;
	//     display: block;
	//     z-index: 200;
	// }
	.info {
		font-size: #{40rpx};
		color: #fff;
		text-align: center;
		width: 100%;
		position: absolute;
		top: #{120rpx};
		font-family: hycyj;
		left: 0;
		height: 20%;

		.name {
			font-size: #{58rpx};
			color: #fff7be;
		}

		.day {
			color: #fff7be;
			font-size: #{95rpx};
			font-family: DIN;
		}

		.yesterday {
			font-size: #{58rpx};
			font-family: DIN;
			color: #fff7be;
		}

		.pay-price {
			font-size: #{95rpx};
			font-family: DIN;
			color: #fff7be;
		}

		.other {
			margin: #{30rpx} 0 #{10rpx};
		}
	}

	.total-gif {
		position: absolute;
		top: #{345rpx};
		left: #{30rpx};
		z-index: 20;
		width: #{691rpx};
		height: #{767rpx};
	}

	.buy-gif {
		position: absolute;
		top: #{450rpx};
		left: #{30rpx};
		z-index: 20;
		width: #{691rpx};
		height: #{663rpx};
	}

	.text-info {
		position: fixed;
		bottom: #{104rpx};
		left: 0;
		width: 100%;
		text-align: center;
		font-size: 29rpx;
		color: #fff;
		font-family: hycyj;
		z-index: 100;
	}

	.page-down {
		position: fixed;
		bottom: #{24rpx};
		left: 0;
		right: 0;
		width: #{70rpx};
		height: #{70rpx};
		margin: 0 auto;
		z-index: 100;
	}

	.more-menu {
		position: fixed;
		bottom: #{35rpx};
		left: 0;
		right: 0;
		width: 100%;
		height: #{89rpx};
		z-index: 100;

		image {
			width: #{89rpx};
			height: #{89rpx};
			margin: 0 #{100rpx};
		}
	}
</style>
